<template>
  <div class="freeClass">
    <Appheader :parentToChild="ymname"></Appheader>
    <div v-html="long_img" class="longimg"></div>
    <div class="content" v-loading="loading">
      <div class="classify">
        <!-- <div class="h_li flex">
          报考类型
          <li :class="choose_classify=='全部'?'classify_bg':''">全部</li>
          <li :class="choose_classify=='各省统考'?'classify_bg':''">各省统考</li>
          <li :class="choose_classify=='名校校考'?'classify_bg':''">名校校考</li>
        </div>-->
        <div class="h_li flex" style="margin-top:15px;">
          <p>报考专业</p>
          <li
            v-for="(list_f,list_index) in zhuanyef"
            :key="list_index"
            @click="listf(list_f.id)"
            :class="choose_id==list_f.id?'classify_bg':''"
          >{{list_f.name}}</li>
        </div>
      </div>
      <div class="class">
        <div class="class_one flex">
          <!-- <img src="../assets/free_book.png" alt /> -->
          免费试听
        </div>
        <ul class="b_bottom">
          <li v-for="(list,index) in listarry" :key="index">
            <img :src="list.photo" alt @click="xkdetail(list.id)" />
            <div class="b_bottom_a flex" @click="xkdetail(list.id)">
              <p class="hidden">{{list.title}}</p>
              <p v-if="list.ykAuthor">{{list.ykAuthor.authorName}}</p>
            </div>
          </li>
        </ul>
        <div class="page" v-if="total!=0">
          <div class="page_a" @click="handleCurrentChange(1)">首页</div>
          <el-pagination
            background
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            layout="prev, pager, next"
            :total="total"
            :page-size="9"
          ></el-pagination>
          <div class="page_a" @click="handleCurrentChange('w')">尾页</div>
        </div>
        <div v-else class="tip2">
          <img src="../assets/none.png" alt />
        </div>
      </div>
      <div class="class" style="margin-top:24px;">
        <div class="class_one flex" style="justify-content: space-between;">
          <div class="free_mingshi flex">
            <!-- <img src="../assets/mingshi.png" alt /> -->
            授课名师
          </div>
          <div class="free_other flex" @click="toseeAll()" style="display:flex;align-items:center;">
            更多名师>>
            <!-- <img src="../assets/goback.png" alt /> -->
          </div>
        </div>
        <div style="width: 1200px;height: 400px;position: relative; overflow:hidden;">
          <div
            id="div"
            style="width: 1200px; height: 400px;display: flex;flex-wrap: nowrap; position: absolute; left: 0;"
          >
            <div v-for="(list, index) in techerList" :key="index">
              <ul class="a_bottom" style="padding-bottom:0;">
                <li @click="skDetail(item.id)" v-for="(item, index) in list" :key="index">
                  <div class="teacher_name">
                    <div class="teacher_name_img"><img :src="item.authorPhoto" alt /></div>
                    <div class="li_div_a">{{item.authorName}}</div>
                  </div>
                  <div v-if="item.ykSchool" class="School_name">{{item.ykSchool.name}}</div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Appfooter></Appfooter>
  </div>
</template>

<script>
import {
  Professionallist,
  ykGoodslist,
  ykAuthorlist,
  channelTime
} from "../api/index";
import Appheader from "./header";
import Appfooter from "./footer";
import $ from "jquery";
export default {
  props: {},
  data() {
    return {
      ymname: "免费试听",
      loading: true,
      zhuanyef: [],
      xuankeA: {
        id: "",
        name: "全部"
      },
      choose_classify: "全部",
      choose_id: "",
      currentPage: 1,
      total: 0, //列表总数
      pagenum: 1, //请求的页数
      pagesize: 9, //请求的数量
      listarry: [], //请求的数据
      techerList: [],
      timers: "",
      long_img: ""
    };
  },
  computed: {},
  created() {},
  mounted() {
    let msg2 = {
      title: "免费试听"
    };
    channelTime(this.qs(msg2))
      .then(res => {
        // console.log(res)
        this.long_img = res.data.ykPc.content;
      })
      .catch(e => {});
    setTimeout(() => {
      let leftPX = $("#div").css("width");
      let px = leftPX.slice(0, leftPX.length - 2);
      console.log(px);
      let i = 0;
      this.timers = setInterval(() => {
        if (-i > Number(px) * 2) {
          i = 0;
        } else {
          i--;
        }
        let left = i + "px";
        $("#div").css("left", left);
      }, 20);
    }, 1000);
    Professionallist()
      .then(res => {
        if (res.data.code == 0) {
          res.data.rows.unshift(this.xuankeA);
          this.zhuanyef = res.data.rows;
        }
      })
      .catch(e => {});
    //教师
    let msg = {
      // pageSize: 5,
      // pageNum: 1
    };
    ykAuthorlist(this.qs(msg))
      .then(res => {
        this.techerList = [];
        console.log(res);
        for (var i = 0; i < res.data.rows.length; i += 6) {
          this.techerList.push(res.data.rows.slice(i, i + 6));
        }
        console.log(this.techerList);
      })
      .catch(e => {});
    this.post();
  },
  beforeDestroy() {
    //清除定时器
    clearInterval(this.timers);
    console.log("beforeDestroy");
  },
  destroyed() {
    //清除定时器
    clearInterval(this.timers);
    console.log("destroyed");
  },
  watch: {},
  methods: {
    post() {
      let msg = {
        type: "2",
        pId: this.choose_id,
        pageNum: this.pagenum,
        pageSize: this.pagesize,
        free: 1
      };
      ykGoodslist(this.qs(msg))
        .then(res => {
          if (res.data.code == 0) {
            this.listarry = res.data.rows;
            this.total = res.data.total;
          }
          this.loading = false;
        })
        .catch(e => {});
    },
    listf(id) {
      this.choose_id = id;
      this.pagenum = 1;
      this.currentPage = 1;
      this.post();
    },
    handleCurrentChange(val) {
      if (val == "w") {
        this.pagenum = Math.ceil(this.total / this.pagesize);
      } else {
        this.pagenum = val;
      }
      this.currentPage = this.pagenum;
      this.loading = true;
      this.post();
    },
    //视频
    xkdetail(id) {
      this.$router.push({
        name: "keList",
        params: {
          id: id
        }
      });
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    },
    //教师详情
    skDetail(id) {
      this.$router.push({
        name: "guwenDetail",
        params: {
          id: id,
          name: "授课名师"
        }
      });
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    },
    //教师列表
    toseeAll() {
      this.$router.push({
        name: "shoukeList"
      });
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    }
  },
  components: { Appheader, Appfooter }
};
</script>

<style scoped>
.longimg {
  width: 100%;
  height: 350px;
}
.content {
  width: 1200px;
  margin: 0 auto;
}
.freeClass {
  background: #262630;
}
/* 分类 */
.classify {
  width: 100%;
  padding: 20px 0px;
  /* background: #fff; */
}
.h_li p{
  line-height: 60px;
  padding-bottom: 20px;
  font-size: 16px;
  color: #fff;
  margin-right: 20px;
}
.h_li li {
  font-size: 16px;
  font-weight: normal !important;
  color: #fff;
  cursor: pointer;
  padding:0 10px;
  line-height: 60px;
  padding-bottom: 20px;
}
.h_li li:hover {
  color: #c8a94f;
}
.h_li li.classify_bg {
  color: #c8a94f;
  background: url(../assets/nav_active_bg.png) no-repeat;
  background-position: center center;
}
/* 内容 */
.class {
  width: 100%;
  background: #363640;
  padding-top: 30px;
  padding-bottom: 50px;
}
.class_one,
.free_mingshi .class_one {
  font-size: 24px;
  font-weight: bold;
  color: #c8a94f;
  margin-bottom: 30px;
}
.class_one{
  padding:0 33px;
}
.class_one img,
.free_mingshi img {
  width: 25px;
  height: 24px;
  margin-left: 14px;
  margin-right: 9px;
}
.free_other {
  font-size: 14px !important;
  font-weight: normal !important;
  color: #a9acbb;
  cursor: pointer;
}
.free_other img {
  width: 7px;
  height: 13px;
  margin-left: 10px;
  margin-right: 24px;
}
.b_bottom {
  padding: 0 33px;
}
.b_bottom li {
  width: 344px;
  margin-bottom: 42px;
  margin-right: 51px;
  box-sizing: border-box;
  cursor: pointer;
}
.b_bottom li:nth-child(3n) {
  margin-right: 0px;
}
.b_bottom li img {
  width: 100%;
  border-radius: 20px;
}
.b_bottom_a {
  font-size: 16px;
  color: #bcbbc0;
  margin-top: 5px;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}
.b_bottom_a p{
  line-height: 30px;
}
.b_bottom_a > p:nth-child(1) {
  /* width: 255px; */
}
.b_bottom {
  display: flex;
  flex-wrap: wrap;
}
.a_bottom {
  justify-content: space-around;
  padding-bottom: 47px;
}
.a_bottom li:hover {
  /* border: 1px solid #c8a94f; */
}
.a_bottom {
  display: flex;
  flex-direction: row;
}
.a_bottom li {
  box-sizing: border-box;
  margin-left: 20px;
  cursor: pointer;
  box-sizing: border-box;
}
.a_bottom img {
  width: 206px;
  height: 280px;
  border: 10px solid #27272f;
  box-sizing: border-box;
  border-radius: 206px;
}
.teacher_name {
  position: relative;
}
.teacher_name_img{
  border:1px solid #c8a94f;
  border-radius: 206px;
}
.li_div_a {
  width: 100%;
  height: 49px;
  line-height: 49px;
  text-align: center;
  font-size: 18px;
  color: #a6a8b7;
}
.a_bottom .School_name {
  font-size: 14px;
  color: #6c6d7f;
  text-align: center;
  /* padding-top: 21px;
  padding-bottom: 19px; */
}
/* page */
.page {
  display: flex;
  justify-content: center;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.page >>> .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #c8a94f !important;
}
.page >>> .el-pager li,
.page >>> .btn-next,
.page >>> .btn-prev {
  width: 34px;
  height: 34px;
  padding: 0;
  line-height: 34px;
  text-align: center;
  border-radius: 5px;
}
.page_a {
  width: 34px;
  height: 34px;
  background: rgba(243, 243, 243, 1);
  border-radius: 5px;
  font-size: 12px;
  color: #333;
  line-height: 34px;
  text-align: center;
}
.page_a:hover {
  background: #c8a94f;
  color: #fff;
}
</style>
